<template>
  <div id="header">
    <div class="headerMain">
      <nav class="navbar navbar-expand-md  navbar-dark">
        <p class="navbars animated bounce">seng</p>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li v-for="item in items" @click="selectNav(item.title)" class="nav-item">
              <p class="tabssP" :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p>
            </li>
          </ul>
          <div class="right">
            <img @click="on" class="show" src="../../static/img/header/suosouh.png"/>
            <img @click="on" class="close" src="../../static/img/header/suosou.png"/>
            <input v-model="inpuTxt" placeholder="Enter something..." class="Inputs">
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Input} from 'iview';
  Vue.component('Input', Input);
  export default {
    data () {
      return {
        inpuTxt: '',
        value: '',
        isSelect: '首页',
        items: [
          {title: '首页'},
          {title: '设计'},
          {title: '爬宠'},
          {title: '撸串'},
          {title: '垂钓'},
          {title: '设置'},
          {title: '帮助'},

        ],
        flag: true,
      }
    },
    mounted () {
      this.isSelect = window.localStorage.getItem('isSelect');
      $(window).scroll(function () {
        let sc = $(window).scrollTop();
        let rwidth = $(window).width()
        if (sc > 100) {
          $(" #header").css("background", "var(--header)");
          $(".collapse").css("background", "var(--header)");
          $(".navbars").css("color", "white");
          $(".tabssP").css("color", "white");
          $(".show").css("display", "none");
          $(".close").css("display", "block");

        } else {
          $(" #header").removeAttr("style");
          $(".collapse").removeAttr("style");
          $(".navbars").removeAttr("style");
          $(".tabssP").removeAttr("style");
          $(".show").removeAttr("style");
          $(".close").removeAttr("style");


        }
      });
    },
    created(){


    },
    methods: {
      setAuthor() {
        this.$store.commit('newAuthor', this.inpuTxt)
      },
      selectNav(title){
        this.isSelect = title;

        switch (title) {
          case '首页':
            this.$router.push('/HomePage');
            break;
          case '设计':
            this.$router.push('/homepage/dome');
            break;
          case '爬宠':
            this.$router.push('/HomePage/carousel');
            break;
          case '撸串':
            this.$router.push('/HomePage');
            break;
          case '垂钓':
            this.$router.push('/HomePage');
            break;

          case '设置':
            this.$router.push('/HomePage');
            break;
          case '帮助':
            this.$router.push('/HomePage');
            break;

        }
        window.localStorage.setItem('isSelect', this.isSelect);
      }
      ,
      handleTabChange(val)
      {
        this.activeTab = val
//        console.log(val)
      },
      on(){
        this.setAuthor();
        if (this.flag) {
          $('.Inputs').css({'display': 'block'})
        } else {

          $('.Inputs').css({'display': 'none'})
        }
        this.flag = !this.flag;
      }
    }
  }
</script>

<style scoped>

  #header {
    width: 100%;
    min-height: 78px;
    position: fixed;
    z-index: 1000;
  }

  .headerMain {
    width: 65%;
    margin: auto;
  }

  .collapse {
    background: none;
  }

  .navbar {
    border: none;
  }

  li {
    width: 50px;
    height: 100%;
    display: inline-block;
    text-align: center;

  }

  .tabssP {
    line-height: 50px;
    color: var(--pColor);
    font-size: 14px;
    cursor: pointer;
  }

  .tabssP:hover {
    font-size: 16px;
    height: 100%;
    color: var(--butColor);
  }

  .navbars{
    font-weight: bold;
    font-size: 30px;
    font-family: var(--fontFamily);
    color: var(--pColor);
    margin-right: 20px;
  }

  .nav-item {
    /*width: 70px;*/
  }

  .navbar-nav {
    margin-left: 100px;
  }

  .active {
    font-size: 16px;
    color: var(--butColor);

  }

  .right {
    width: 260px;
    margin-top: -15px;
    float: right;
  }

  .right img {
    float: right;
    margin-left: 10px;
    margin-top: 5px;
    width: 20px;
    height: 20px;
  }

  .Inputs {
    float: right;
    width: 220px;
    height: 25px;
    display: none;
    background: none;
    border: none;
    border-bottom: 1px solid #999999;
    outline: none;
    color: #999999;
  }

  .show {
    display: block;
  }

  .close {
    display: none;
  }

  @media (max-width: 1330px) {
    .headerMain {
      width: 100%;
      margin: auto;
    }

  }

  @media (max-width: 1415px) {
    .right {
      width: 200px;
    }

    .Inputs {
      width: 160px;
    }
  }

  @media (max-width: 1150px) {
    .navbar-nav {
      margin-left: 0px;
    }

    .nav-item {
      width: 50px;
    }
  }

  @media (max-width: 772px) {

    .right {
      width: 260px;
      margin-top: -20px;
      margin-bottom: 20px;
      float: right;
    }

    #header {
      background: var(--header);
    }

    .collapse {
      background: var(--header);
    }

    .tabssP {
      color: white;
    }

    .close {
      display: block;
    }
    .navbars{
      color: white;
    }

  }


</style>
